<template>
  <div class="addCard-container">
    <div class="addCardList-box">
      <!-- head return-->
      <div class="addCard-head">
        <van-nav-bar title="添加银行卡">
          <template #left>
            <van-icon name="arrow-left" size="24" color="black" @click="$router.push('/home/card')" />
          </template>
        </van-nav-bar>
      </div>

      <div class="addCard-content">
        <div class="addCard-list">
          <div class="card-type">
            <div class="input-title">
              <span>支付方式</span>
            </div>
            <div class="input-box">
              <span>信用卡</span>
            </div>
          </div>
          <div class="card-data">
            <div class="input-title">
              <span>输入信用卡信息</span>
            </div>
            <div class="card-input-box">
              <div class="card-number">
                <div class="card-number-input">
                  <input type="text" placeholder="xxxx xxxx xxxx xxxx" v-model="cardNumber" maxlength="19">
                </div>
                <div class="card-logos">
                  <span class="iconfont visa"></span>
                  <span class="iconfont master"></span>
                  <span class="iconfont amex"></span>
                </div>
              </div>
              <div class="card-date">
                <div class="card-years-input">
                  <input type="text" placeholder="09/24" v-model="cardDate" maxlength="5">
                </div>
                <div class="card-security-number">
                  <input type="Number" placeholder="123" v-model="securityNum"
                    oninput="if(value.length>3)value=value.slice(0,3)">
                </div>
                <div class="security-number-logo">
                  <span class="iconfont card-demo"></span>
                </div>
              </div>
            </div>
          </div>
          <div class="card-holder">
            <div class="input-title">
              <span>持卡人姓名</span>
            </div>
            <div class="input-box">
              <input type="text">
            </div>
          </div>
          <div class="country-area">
            <div class="input-title">
              <span>国家和地区</span>
            </div>
            <div class="input-box">
              <span @click="show=true">{{countryName}}</span>
            </div>
          </div>
          <van-button type="primary" block @click="$router.push('/home/card')">同意并绑定银行卡</van-button>
        </div>
      </div>
      <van-popup v-model="show" round position="bottom" :style="{ height: '45%' }">
        <van-picker show-toolbar :columns="country" :default-index="index" @cancel='show=false'
          @confirm="enterCountry" />
        <input class="search" type="text" placeholder="关键字搜索" v-model="searchText">
      </van-popup>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      country: [],
      show: false,
      cardNumber: '',
      cardDate: '',
      securityNum: '',
      countryName: '中国',
      // 默认国家索引
      index: 36,
      searchText: ''
    }
  },
  created() {
    // 初始化国家地区数据
    this.getCountryList()
  },
  watch: {
    cardNumber(newNum) {
      // 银行卡号 每4位加 空格
      var num = newNum
        .replace(/\s/g, '')
        .replace(/[^\d]/g, '')
        .replace(/(\d{4})(?=\d)/g, '$1 ')
      this.cardNumber = num
    },
    cardDate(newNum) {
      // 信用卡日期 每2位加 '/'
      var num = newNum
        .replace(/\s/g, '')
        .replace(/[^\d]/g, '')
        .replace(/(\d{2})(?=\d)/g, '$1/')
      this.cardDate = num
    },
    // 关键字搜索策略
    searchText(val) {
      this.country.find((item, i) => {
        if (item.indexOf(val) !== -1 && val !== '') {
          this.index = i
        }
      })
    }
  },
  methods: {
    // 请求国家地区列表
    async getCountryList() {
      const { data: res } = await axios.get('/static/address/Country.json')
      var list = res.country[1].options
      for (let i = 0; i < list.length; i++) {
        this.country.push(list[i].label)
      }
    },
    // 确认当前国家
    enterCountry(item) {
      this.show = false
      this.countryName = item
      this.searchText = ''
    }
  }
}
</script>

<style lang="less" scoped>
.addCardList-box {
  position: absolute;
  width: 100%;
  height: 100%;
  max-width: 640px;
  z-index: 2;
  background-color: #ededed;
  .addCard-head {
    position: fixed;
    width: 100%;
    max-width: 640px;
    z-index: 1;
  }
}
.addCard-content {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: #ededed;
  .addCard-list {
    overflow: hidden;
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    top: 46px;
    width: 98%;
    padding-top: 0.6em;
    border-radius: 9px;
    background: white;
    .card-type,
    .card-data,
    .card-holder,
    .country-area {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      padding-top: 0.6em;
      width: 95%;
      height: 66px;
      .input-title {
        font-size: 0.7em;
        span:nth-child(1) {
          position: absolute;
          left: 1em;
        }
      }
      .input-box {
        position: relative;
        width: 100%;
        height: 60%;
        border: 0.1em solid #b3b3b3;
        border-radius: 9px;
        span:nth-child(1) {
          position: absolute;
          left: 0.9em;
          color: orange;
        }
        input:nth-child(1) {
          width: 92%;
          border: none;
          color: orange;
        }
      }
    }
    .card-data {
      height: 114px;
      .card-input-box {
        position: relative;
        width: 100%;
        height: 75%;
        border: 0.1em solid #b3b3b3;
        border-radius: 9px;
        .card-number {
          display: flex;
          position: relative;
          width: 93%;
          height: 50%;
          left: 50%;
          transform: translateX(-50%);
          border-bottom: 0.1em solid #b3b3b3;
          .card-number-input {
            display: flex;
            align-items: center;
            width: 60%;
            height: 100%;
            input:nth-child(1) {
              width: 96%;
              height: 60%;
              border: none;
            }
          }
          .card-logos {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 40%;
            height: 100%;
            padding-left: 0.3em;
            padding-right: 0.3em;
            .visa:before {
              content: '\e831';
              font-size: 2.2em;
            }
            .master:before {
              content: '\e64d';
              font-size: 2.3em;
            }
            .amex:before {
              content: '\e82c';
              font-size: 2.3em;
            }
          }
        }
        .card-date {
          display: flex;
          align-items: center;
          position: relative;
          width: 93%;
          height: 50%;
          left: 50%;
          transform: translateX(-50%);
          .card-years-input {
            display: flex;
            align-items: center;
            width: 42.5%;
            height: 70%;
            border-right: 0.1em solid #b3b3b3;
            input:nth-child(1) {
              width: 93%;
              height: 60%;
              border: none;
            }
          }
          .card-security-number {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 42.5%;
            height: 70%;
            input:nth-child(1) {
              width: 90%;
              height: 60%;
              border: none;
            }
          }
          .security-number-logo {
            width: 15%;
            height: 100%;
            text-align: center;
            line-height: 42.75px;
            .card-demo:before {
              content: '\ec07';
              font-size: 2.3em;
            }
          }
        }
      }
    }
    /deep/.van-button--primary {
      width: 96%;
      background: orange;
      border: orange;
      border-radius: 9px;
      font-size: 1.1em;
      margin-top: 1.5em;
      margin-bottom: 1.5em;
    }
  }
}
/deep/.van-popup {
  .van-picker__cancel {
    font-size: 1em;
  }
  .van-picker__confirm {
    font-size: 1em;
    color: orange;
  }
  .search {
    position: absolute;
    width: 200px;
    height: 27px;
    top: 0.6em;
    left: 50%;
    border: none;
    border-radius: 9px;
    background: #f5f5f5;
    transform: translateX(-50%);
    color: #a3a3a3;
    text-align: center;
  }
}
</style>
